﻿<div class="messageBox" tabindex="-1" style="width: 500px;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" data-bind="click: close" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Edit Artist</h4>
    </div>
    <div class="modal-body" data-bind="with: artist">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-md-3 control-label">Name</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" placeholder="artist name" data-bind="value: Name" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">Bio</label>
                <div class="col-md-9">
                    <textarea rows="7" class="form-control" placeholder="artist bio" data-bind="value: Bio"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">Photos</label>
                <div class="col-md-9">
                    <button type="button" class="btn btn-default" data-bind="click: $root.pickArtistPhoto.bind($root)">
                        <i class="fa fa-plus"></i>
                        Add a photo
                    </button>
                    <div data-bind="foreach: $root.newImages">
                        <img class="pull-left" data-bind="attr: { src: $data }" style="max-height: 64px; max-width: 64px; padding: 5px;" />
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: close">Cancel</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-bind="click: save">Save</button>
    </div>
</div>